<template>
    <div class="boxsss">
        <div class="flex flex flexJ">
            <div class="info-title">公告</div>
            <div v-hasPermi="['shangjia:noticeList']" class="flex flexa" @click="go">
                <div class="edit">查看更多</div>
            </div>
        </div>
        <div class="swiper-box" v-if="carousel.length>0">
            <swiper :options="swiperOptions">
                <swiper-slide  v-for="item in carousel" :key="item.id" :data-data='JSON.stringify(item)'>
                    <img  class="imgitem" :src="item.titleImg" alt="" :data-v='JSON.stringify(item)'>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="msg-list" :style="{marginTop: carousel.length>0 ? '0' : '16px'}">
            <div class="flex flexa" v-for="value in character" @click="openNotice(value)">
                <div class="msg-list-img">
                    <img src="@/assets/img/index/comp7-ling.png" alt="">
                </div>
                <div class="msg-list-text one-line">{{ value.noticeTitle }}</div>
            </div>
        </div>
        <noticeDetailDialog ref="noticeDetailDialog"></noticeDetailDialog>
        
        
    </div>
</template>
<script>

import homeApi from "@/api/home/newIndex";
import noticeDetailDialog from "@/components/common/noticeDetailDialog.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Pagination from "@/components/Pagination";
export default {
    components: { Swiper, SwiperSlide, noticeDetailDialog, Pagination },
    data() {
        return {
            swiperOptions: {
                loop: true, // 循环模式选项
                slidesPerView: 1,
                speed: 1000,
                autoplay: {
                    delay: 2000, // 自动切换时间间隔
                    disableOnInteraction: true, // 用户操作后是否继续自动切换
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'bullets'
                },
                navigation: {
                    nextEl: ".swiper-next", // 自定义下一页按钮的选择器
                    prevEl: ".swiper-prev", // 自定义上一页按钮的选择器
                },
                 preventLinksPropagation: false,
                 on: {
                    click: (event) =>  {
                        if (event.target.getAttribute('data-v')) {
                            // 这里的 obj 就是当前点击图片所对应的信息
                            let obj = JSON.parse(event.target.getAttribute('data-v'))
                            this.openNotice(obj)
                        }
                    }
                }

            },
            carousel: [
            ],
            character: [],

            queryParams: {
              
                noticeType: 'sjdtzgg'
            },
            loading: false,
            dialogVisible: false,
            total: 0,
            noticeList: [],
            expandedRowKeys: [], // 存储已展开的行ID
            layHeight:322
        }
    },
   
    created() {
        this.getTongjiData()
        // this.getList()
    },
    methods: {
        async getTongjiData() {
            const homeNoticeId = localStorage.getItem("homeNoticeId");

            let res = await homeApi.notice()

             if(res.data.character.length > 0 &&
            (!homeNoticeId || homeNoticeId < res.data.character[0].noticeId)) {
                 this.$refs.noticeDetailDialog.open(res.data.character[0]);
                localStorage.setItem("homeNoticeId", res.data.character[0].noticeId);
             }

            this.character = res.data.character
            this.carousel = res.data.carousel
            if (this.carousel.length > 1) {
                this.swiperOptions.loop = true
                this.layHeight = 180
            } else {
                this.swiperOptions.loop = false

            }
        },
        // 打开通知公告详情
        openNotice(item) {
            console.log(item,777)
            this.$refs.noticeDetailDialog.open(item);
        },
        // 查看更多弹窗
        go() {
             const timestamp = new Date().getTime();
           this.$router.push({
            path: '/tenantUtils/notice',
            query: {
              timestamp,
            },
          });
        //   this.dialogVisible = true;
        //   this.getList();
        },
        /** 查询公告列表 */
        getList() {
            this.loading = true;
            homeApi.baseNotice(this.queryParams).then(response => {
                this.noticeList = response.data;
                this.loading = false;
            });
        },
        // 状态格式化
        statusFormat(row) {
            return row.status === "0" ? "正常" : "关闭";
        },
        // 类型格式化
        typeFormat(row) {
            if (row.noticeType === "1") {
                return "通知";
            } else if (row.noticeType === "2") {
                return "公告";
            } else if (row.noticeType === "sjdtzgg") {
                return "商家动态公告";
            }
            return row.noticeType;
        },
        // 处理展开行变化
        handleExpandChange(row, expandedRows) {
            if (expandedRows.length > 0) {
                // 如果有展开的行，将其ID添加到expandedRowKeys中
                this.expandedRowKeys = expandedRows.map(item => item.id);
            } else {
                // 如果没有展开的行，清空expandedRowKeys
                this.expandedRowKeys = [];
            }
        },
        // 手动控制展开/收起
        handleExpand(row, index) {
            const $table = this.$refs.noticeTable;
            if (this.expandedRowKeys.includes(row.id)) {
                // 如果已经展开，则收起
                this.expandedRowKeys = this.expandedRowKeys.filter(id => id !== row.id);
                $table && $table.toggleRowExpansion(row, false);
            } else {
                // 如果未展开，则展开
                this.expandedRowKeys.push(row.id);
                $table && $table.toggleRowExpansion(row, true);
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import url('./style.css');
.boxsss {
     height: 100%;
  display: flex;
  flex-direction: column;
  .flexJ {
    height: 20px;
  }
  .swiper-box {
    height: 150px;
  }
  .msg-list {
    flex: 1;
    overflow-y: auto;
  }
}
.info-title {
    font-size: 16px;
    font-weight: 600;
    color: #18191A;
}

.edit {
    cursor: pointer;
    color: #6C5DD3;
    font-size: 14px;
    text-decoration-line: underline;
}

.swiper-box {
    margin-top: 18px;
    text-align: center;
    position: relative;
    
    .imgitem {
        width: 100%;
        height: 130px;
        cursor: pointer;
        border-radius: 10px;
         display: block;
    }
}

// 自定义分页器样式
::v-deep .swiper-pagination {
    bottom: 10px !important;

    .swiper-pagination-bullet {
        width: 16px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 1;
        margin: 0 4px;
        transition: all 0.3s ease;
        border-radius: 10px;

        &.swiper-pagination-bullet-active {
            background: #fff;
            transform: scale(1.2);
        }
    }
}

.msg-list {
  
    .flex {
        margin-bottom: 10px;
    }
    margin-bottom: 6px;
    .msg-list-img {
        flex: 0 0 16px;
        margin-right: 6px;

        img {
            vertical-align: middle;
            width: 100%;
            cursor: pointer;
        }
    }

    .msg-list-text {
        font-size: 14px;
        color: #999999;
        font-weight: 500;
        cursor: pointer;

        &:hover {
            color: #666;
        }
    }
}

/* 富文本内容样式 */
.notice-content {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    line-height: 1.6;
    
    ::v-deep img {
        max-width: 100%;
    }
    
    ::v-deep p {
        margin-bottom: 10px;
    }
    
    ::v-deep table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 15px;
    }
    
    ::v-deep th, ::v-deep td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    ::v-deep th {
        background-color: #f2f2f2;
    }
}
</style>
